<template>
    <u-popup :show="alertModal.show" mode="center" round="10" overlayOpacity="0.4" :safe-area-inset-bottom="false">
        <view class="modal">
            <view class="modal__close" @click="$hideModal" v-if="alertModal.showClose">
                <image src="/static/icon/close.png" mode="scaleToFill" />
            </view>
            <view class="modal__top">
                <view class="modal__tit">{{ alertModal.title }}</view>
                <view class="modal__cont">{{ alertModal.content }}</view>
            </view>

            <view class="modal__btn">
                <view class="modal__btn__item bor_t bor_r" :style="{ color: '#989898' }" @click="alertModal.confirm(false)" v-if="alertModal.showCancel">
                    {{ alertModal.cancelText }}
                </view>
                <view class="modal__btn__item bor_t" :style="{ color: '#FF8600' }" @click="alertModal.confirm(true)" v-if="alertModal.showConfirm">
                    {{ alertModal.confirmText }}
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    data() {
        return {
            alertModal: {
                show: false,
                title: '',
                content: '',
                showCancel: true,
                showClose: false,
                showConfirm: true,
                confirmText: '确定',
                cancelText: '取消',
                confirm: () => {},
            },
        };
    },
    methods: {
        $showModal(opts) {
            const { success, ...rest } = opts;
            Object.keys(rest).forEach(key => {
                this.alertModal[key] = opts[key];
            });
            this.alertModal.confirm = flag => {
                let result = flag ? { confirm: true, cancel: false } : { confirm: false, cancel: true };
                success && success(result);
            };
            this.alertModal.show = true;
        },
        $hideModal() {
            this.alertModal.show = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.modal {
    width: 580rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    position: relative;
    .modal__top {
        min-height: 154rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .modal__close {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
        image {
            width: 21rpx;
            height: 21rpx;
        }
    }
    .modal__tit {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        margin-top: 30rpx;
    }
    .modal__cont {
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
        padding: 28rpx 50rpx 40rpx;
    }
    .modal__btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .modal__btn__item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20rpx 0;
        }
        .bor_r {
            border-right: 1px solid #f3f3f3;
        }
        .bor_t {
            border-top: 1px solid #f3f3f3;
        }
    }
}
</style>
